<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:用户管理列表详情组件
* @fileName:UserDetails.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-7
!-->
<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import { showSuccessMessage } from "@/common/message";
import { getCurrentInstance, ref } from "vue";
const { proxy } = getCurrentInstance() as any;

const props = defineProps({
  tableData: Array as any,
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: true,
  },
  // 删除方法
  delUser: Function as any,
  //弹窗显示方法
  dialogEditFunc: Function as any,
  // 改变状态方法
  changeStatus: Function as any,
  // 页面初次加载
  isPageLoading: Boolean,
});

/**
 * 点击删除
 * @param currentInfo 当前行数据
 * @reture viod
 */
const onDel = (currentInfo: any) => {
  props.delUser(currentInfo.id);
};

/**
 * 点击修改
 * @param currentInfo 当前行数据
 * @reture viod
 */
const onEdit = (currentInfo: any) => {
  props.dialogEditFunc(currentInfo);
};

/**
 * 重置密码
 * @param id 用户ID
 * @reture viod
 */
const onResetPassword = (id: string) => {
  const res = proxy.$HTTP.post({
    url: `/user/` + id + `/password`,
  });
  res.then((res: any) => {
    if (res.code === 200) {
      ElMessageBox.alert("重置成功 , 新的密码是 ： " + res.data, "重置密码", {
        confirmButtonText: "关闭",
        callback: (action: Action) => {},
      });
    } else {
      showSuccessMessage({
        message: res.msg,
      });
    }
  });
};

/**
 * 改变状态
 * @param v 改变的状态值
 * @param r 当前行数据
 * @reture viod
 */
const clickStatus = (v: any, r: any) => {
  props.changeStatus(v, r);
};

/**
 * 所属角色返显
 * @param roles 角色数组
 * @reture 角色字符串
 */
const showRoles = (roles: any) => {
  if (roles.length === 0) {
    return "无";
  } else {
    return roles
      .map((item: any) => {
        return item.roleName;
      })
      .toString();
  }
};
</script>

<template>
  <div class="page-details">
    <el-table
      v-loading="props.isListLoading"
      :data="props.tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column
        prop="userName"
        label="用户账号"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="nickName"
        label="昵称"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column prop="org" label="所属组织" />-->
      <el-table-column
        prop="roles"
        label="所属角色"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ showRoles(scope.row.roles) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <!-- 1正常，2禁用 -->
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            class="ml-2"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ccc"
            @change="clickStatus($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="createId" label="创建人">
        <template #default="scope">
          {{ scope.row.createId }}
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <span class="operation">
            <lanius-tooltip content="编辑">
              <img
                @click="onEdit(scope.row)"
                src="@/assets/img/common/edit.png" /></lanius-tooltip
          ></span>
          <span class="operation">
            <lanius-pop-confirm
              title="重置提示"
              :content="'确定要重置' + scope.row.nickName + '?'"
              @confirm="onResetPassword(scope.row.id)"
            >
              <div style="display: inline">
                <lanius-tooltip content="重置密码">
                  <img src="@/assets/img/common/reset.png" />
                </lanius-tooltip>
              </div>
            </lanius-pop-confirm>
          </span>
          <span class="operation">
            <lanius-pop-confirm
              title="删除提示"
              :content="'确定删除' + scope.row.nickName + '?'"
              @confirm="onDel(scope.row)"
            >
              <div style="display: inline">
                <lanius-tooltip content="删除">
                  <img src="@/assets/img/common/delete.png" />
                </lanius-tooltip>
              </div>
            </lanius-pop-confirm>
          </span>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<style>
.custom-popover .custom-popover-title {
  font-size: 20px;
  color: #fff;
  letter-spacing: 1px;
}
.custom-popover .custom-popover-title img {
  width: 25px;
  height: 22px;
  position: relative;
  top: 3px;
  margin-left: 10px;
  margin-right: 15px;
}
.custom-popover .custom-popover-content {
  color: #fff;
  font-size: 14px;
  padding-left: 50px;
  line-height: 40px;
}
.custom-popover .custom-popover-button {
  text-align: right;
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background-color: rgba(106, 106, 106, 1);
  color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-color: rgba(106, 106, 106, 1);
  right: 0;
}
.popper {
  background-color: rgba(106, 106, 106, 0.9) !important;
  height: 94px !important;
  border-radius: 0 !important;
}
.custom-popover + .el-popper__arrow::before {
  background-color: rgba(106, 106, 106, 0.9) !important;
  border: none !important;
}
</style>
<style scoped lang="scss">
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.page-details {
  margin-top: 15px;
}

.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
